<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表达式小结</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      //声明虚拟 DOM 对象
      //1. 字面量值   number string null undefined object boolean  symbol
      //          nsuob  =>  usonb  => you  so  nb
      // let vdom = <div>{undefined}</div>; // X
      // let vdom = <div>{'iloveyou'}</div>; // √
      // let vdom = <div>{Symbol()}</div>; // X
      // let vdom = <div>{{text: 'i miss you'}}</div>; // X  这里会报错
      // let vdom = <div test={{text: 'abc'}}>{'i miss you'}</div>; // X  这里会报错
      // let vdom = <div>{5211314}</div>; // √
      // let vdom = <div>{null}</div>; // X
      // let vdom = <div>{true}</div>; // X
      // let vdom = <div>{false}</div>; // X
      // let vdom = <div>{[1, '2', false]}</div>// √
      // let vdom = <div>{'12'}</div> // 
      // let vdom = <div>{React.createElement('h2', null, '我是一个 H2 标签哦')}</div>
      // let vdom = <div>{<h2>H2 标签哦</h2>}</div>
      // let vdom = <div><h2>H2 标签哦</h2></div> // √
      // let vdom = <div>{[<h1 key="1">H1 标签哦</h1>, <h3 key="2">H3 标签哦</h3>, <h2 key="3">H2 标签哦</h2>]}</div> // √

      //2. 变量  属性值
      // let str = '有幽默感的人，永远都不会默默无闻。';
      // let str = true;
      // let obj = {
      //   msg: '海内存知己，天涯若比邻。'
      // }

      //3. 运算
      // let vdom = <div>{100 + 200}</div>
      // let vdom = <div>{100 - 200}</div>

      //4. 函数调用
      // function fn(){
      //   return 9527;
      // }
      // let vdom = <div>{fn()}</div>

      //注意: 大括号中不能编写 JS 语句 if(){}   switch()  for(){}  while{}

      ReactDOM.render(vdom, document.querySelector('#root'));
    </script>
  </body>
</html>
